<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>js</title>
	<style>
		select{
			width:100px;
			height:150px;
		}
	</style>
</head>
<body>
	<h1>水果选择：</h1>
	<form action="">
		<select name="" id="s1" size='2'>
			<option value="">西瓜</option>
			<option value="">冬瓜</option>
			<option value="">苹果</option>
			<option value="">南瓜</option>
		</select>
		<!--form表单中input button 不提交按钮-->
		<input type="button" value=">>" id='btn'>
		<select name="" id="s2" size='2'>
			
		</select>
	</form>
	
</body>

<script>
	
	btn=document.getElementById('btn');
	s1=document.getElementById('s1');
	s2=document.getElementById('s2');
	opts=s1.options;

	btn.onclick=function(){
		idx=s1.selectedIndex;
		//alert(opts[idx].outerHTML); //获取到的是字符串；对象只能不能复制，只能移动。字符串可以移动复制。点击左侧被选内容后，内容移动，并且左侧内容不会消失。
		//s2.innerHTML=opts[idx].outerHTML;//右侧只出现当前选中的水果

		s2.innerHTML+=opts[idx].outerHTML; //+=是赋值的意思; 右侧出现选择过的所有水果
	}

</script>
</html>